import React from "react";
import {
  HashRouter as Router,
  Route,
  Switch,
  Link,
  useParams,
} from "react-router-dom";

// https://reacttraining.com/react-router/web/example/basic  官网案例：Nesting
export default function IRouter() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>
        <hr></hr>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function Topics() {
    let { path, url } = useRouteMatch();
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="rendering">Rendering with React</Link>
          </li>
          <li>
            <Link to="components">Components</Link>
          </li>
          <li>
            <Link to="props-v-state">Props v. State</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/rendering">
                <Re></Re>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Re(){
    return (
        <div>
            <h3>rendering</h3>
        </div>
    );
}
